<template>
	<div class="home">

		<!-- 改版区域开始 -->
		<div class="wrap padding-bottom-50">
			<div class="blockTitle text-center padding-tb-40 margin-top-30">
				<div class="base-font-40 text-bold">全方位一站式全球事业与家庭规划服务</div>
				<div class="flex align-center justify-center margin-top-20">
					<div class="line"></div>
					<div class="lineMid"></div>
					<div class="line"></div>
				</div>
				<div class="base-font-15 text-999 blockTitleMs">
					金申家族办公室作为全国领先的环球财务规划服务机构，为客户提供海外留学、环球移民、环球投资、海外保险、海外房产及家族信托传承等专业服务。
				</div>
			</div>
			<el-row :gutter="50">
				<el-col :span="12" v-for="(item,index) in syyyList" :key="index">
					<div class="flex align-center fwghBox pointer" @click="goQfwLink(item.operateParams)">
						<div class="iconImg">
							<el-image :src="item.files" fit="cover"></el-image>
						</div>
						<div>
							<div class="base-font-18 text-bold">{{item.name}}</div>
							<div class="base-font-16 text-999 margin-top-20">
								{{item.description}}</div>
						</div>
					</div>
				</el-col>

			</el-row>
		</div>
		<div class="padding-top-10 padding-bottom-40" style="background:#f6f7f9;">
			<div class="wrap">
				<div class="blockTitle text-center padding-tb-40 margin-top-30">
					<div class="base-font-40 text-bold">金申动态</div>
					<div class="flex align-center justify-center margin-top-20">
						<div class="line"></div>
						<div class="lineMid"></div>
						<div class="line"></div>
					</div>
					<div class="base-font-15 text-999 blockTitleMs">
						金申家族办公室作为全国领先的环球财务规划服务机构，为客户提供海外留学、环球移民、环球投资、海外保险、海外房产及家族信托传承等专业服务。
					</div>
					<div class="flex align-center justify-center flex-wrap">
						<div class="newsMenuItem" @mouseenter="newMenuHandle(index)" @click="goNews(item.id)" v-for="(item,index) in newsMenuList"  :class="newsMenuIndex===index?'checked':''" :key="index">{{item.name}}</div>
					</div>
				</div>
				<div class="bg-white" style="padding:20px 20px 0 20px;box-sizing: border-box">
					<el-row :gutter="50">
						<el-col :span="12">
							<div class="newsBlock" >
								<div class="newsLeftBlock" v-if="bannerRightNewList && bannerRightNewList.length>0" @click="goBannerRightNewDetail(bannerRightNewList[0].id)">
									<div class="newsLeftBlockImg"><el-image :src="bannerRightNewList[0].image" fit="cover"></el-image></div>
									<div class="padding-top-20">
										<div class="base-font-16 text-333 ellipsis1 text-bold">{{bannerRightNewList[0].name}}
										</div>
										<div class="base-font-14 text-999 margin-top-10" v-if="bannerRightNewList[0].createTimeStr">{{bannerRightNewList[0].createTimeStr}}</div>
										<div class="ellipsis2 base-font-15 text-999 margin-top-15">
											{{bannerRightNewList[0].description || '无'}}
											
										</div>

									</div>

								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="newsBlock">
								<div class="newsRightItem" @click="goBannerRightNewDetail(item.id)" v-for="(item,index) in bannerRightNewList" :key="index" v-if="index>0">
									<div class="base-font-16 text-333 ellipsis1 text-bold">{{item.name}}</div>
									<div class="ellipsis2 base-font-15 text-999 margin-top-20">
										{{item.description || '无'}}
									</div>
									<div class="flex align-center justify-between margin-top-10">
										<div class="base-font-14 text-999">{{item.createTimeStr}}</div>
										<div>
											<div class="flex align-center text-999">
												<span class="base-font-13">MORE</span>
												<i class="el-icon-right margin-left-6"></i>
											</div>
										</div>
									</div>
								
								</div>
							</div>
						</el-col>
					</el-row>
				</div>

			</div>

		</div>
		<div class="wrap padding-bottom-50">
			<div class="blockTitle text-center padding-tb-40 margin-top-30">
				<div class="base-font-40 text-bold">环球视野</div>
				<div class="flex align-center justify-center margin-top-20">
					<div class="line"></div>
					<div class="lineMid"></div>
					<div class="line"></div>
				</div>
				<div class="base-font-15 text-999 blockTitleMs">
					金申家族办公室作为全国领先的环球财务规划服务机构，为客户提供海外留学、环球移民、环球投资、海外保险、海外房产及家族信托传承等专业服务。
				</div>
			</div>
			<div class="flex align-center justify-between">
				<div class="" v-for="(item,index) in jsslList" :key="index" @mouseenter="handleMouseEnter(index)"
      @mouseleave="handleMouseLeave(index)" @click="goHqsyDetail(item.id)">
					<div class="hqsyItem pointer" :class="jsslListIndex===index?'checked':''">
						<div class="jsjzInfo">
							<div class="ellipsis1 base-font-14 text-white">{{item.name}}</div>
							<div class="base-font-13 margin-top-15">{{item.description}}</div>
						</div>
						<el-image :src="item.image" fit="cover"></el-image>
					</div>
				</div>
			</div>
		</div>
		<div class="padding-top-10 padding-bottom-40" style="background:#f6f7f9;">
		<div class="wrap padding-bottom-50">
			<div class="blockTitle text-center padding-tb-40 margin-top-30">
				<div class="base-font-40 text-bold">专业团队是申请成功的关键</div>
				<div class="flex align-center justify-center margin-top-20">
					<div class="line"></div>
					<div class="lineMid"></div>
					<div class="line"></div>
				</div>
				<div class="base-font-15 text-999 blockTitleMs">
					24小时为您提供咨询服务，根据您的实际需求制定专属方案
				</div>
			</div>
			<team-vue></team-vue>
			<!-- <div class="ourTeam">
				<div class="swiper" style="overflow: hidden;" id="ourTeamSwiper">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide" v-for="(item,index) in tdcyList" :key="'hzhb'+index" @click="goGwDetail(item.id)">
							<el-popover
							    placement="right-start"
							    title="团队成员"
								width="380"
							    trigger="hover"
							    >
							    <div>
									<div class="flex">
										<div class="teamEwm"><el-image :src="item.qrCode" fit="cover"></el-image></div>
										<div class="base-font-13 text-666" style="padding-left:10px;">
											<div class="base-font-14 text-bold text-orange">{{item.name}}</div>
											<div class="margin-top-15">邮箱：{{item.email}}</div>
											<div class="margin-top-5">手机：{{item.phone}}</div>
										</div>
									</div>
									<div class="base-font-14 margin-top-10">个人简介:{{item.description}}</div>
								</div>
							 
							<div slot="reference" class="ourTeamItem" @mouseenter="teamMouseenter(item)" @mouseleave="teamMouseleave(item)">
								<div class="ourTeamAvatar"><el-image :src="item.headImage" fit="cover"></el-image></div>
								<div class="base-font-18 text-bold margin-top-30">{{item.name}}</div>
								<div class="flex align-center justify-center contactUsBtn">
									<i class="el-icon-chat-line-round"></i>
									<span class="margin-left-6">在线咨询</span>
								</div>
								<div class="base-font-15 text-999 margin-top-10 ellipsis3">{{item.description}}</div>

							</div>
							 </el-popover>
				
				        </div>
				    </div>
				</div>
			</div> -->
		</div>
		</div>
		<!-- 改版区域结束 -->
		<!-- 内容区域 -->
		<!-- <div class="wrap "> -->
			<!-- banner新闻 -->
			<!-- <div class="flex justify-between padding-tb-20">
				<div class="newSwiper">
					<el-carousel height="290px">
						<el-carousel-item v-for="(item,index) in newSwiper" :key="index">
							<div class="bannerImg pointer" @click="goDetail(item.operateParams)">
								<el-image :src="item.files" fit="cover"></el-image>
								<div class="title base-font-16">{{item.operateIntroduct.slice(3)}}</div>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="bannerRightNew ">
					<div class="newsMenu flex align-center">
						<div class="newsMenuItem" @click="bannerRightNewMenuHandle(index)"
							:class="newsMenuIndex===index?'checked':''" v-for="(item,index) in newsMenuList"
							:key="index">
							{{item.name}}
						</div>
					</div>
					<div class="bannerRightNewItem flex align-center justify-between margin-top-2 base-font-14"
						v-for="(item,index) in bannerRightNewList" :key="index" v-if="index<8"
						@click="goBannerRightNewDetail(item.id)">
						<div class="label">{{index+1}}</div>
						<div>
							<div class="title ellipsis1">{{item.name}}</div>
						</div>
						<div class="time" v-if="item.createTimeStr">{{item.createTimeStr.substring(5,10)}}</div>
					</div>
				</div>
			</div>


			<div class="flex align-center justify-between">

				<div class="fourMenuItemNew pointer" v-for="(item,index) in forMenuList" :key="index"
					@click="goDetail(item.operateParams)">
					<el-image :src="item.files" fit="cover"></el-image>
				</div>
			</div>

			<div v-if="floorOneShow && floortwoShow">
				<Floor floorNum="1" title="热门地区" rightTitle="亚洲" ztTitle="大洋洲" :syyyList="syyyList" :left-list="list"
					key="floorNum01"></Floor>
			</div>

			<div class="adImg margin-top-20 pointer" @click="goDetail(adImg[0].operateParams)"><el-image
					:src="adImg[0].files" fit="cover"></el-image></div>
			<div v-if="floorOneShow && floortwoShow">
				<Floor floorNum="2" title="欧洲" ztTitle="非洲" :syyyList="syyyList2" rightTitle="美洲" :left-list="ozlist"
					key="floorNum02"></Floor>
			</div> -->
			<!-- 考试专区 -->
		<!-- 	<div v-if="floorOneShow && floortwoShow">
				<examinationAreaVue title="美洲" key="floorNum03"></examinationAreaVue>
			</div> -->
			<!-- 热图专区 -->
		<!-- 	<div class="margin-top-20">
				<hotPicAreaVue :websiteArticles="websiteArticles"></hotPicAreaVue>
			</div>
		</div> -->
		<!-- 友情链接 -->
		<!-- <div class="grayBlcok">
			<div class="wrap">
				<div class="menuTit flex align-center justify-between">
					<div class="base-font-18 text-333">
						<div class="titleLine">友情链接</div>
					</div>
					<div class="base-font-14 text-999 margin-left-15">申请链接联系qq:1589787930</div>
				</div>
				<div class="flex align-center flex-wrap">
					<div class="linkItem margin-top-20" v-for="(item,index) in linkList" @click="goLink(index)">荣森网络
					</div>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	// 引入Swiper类和样式
	import Swiper from 'swiper/swiper-bundle'
	import 'swiper/swiper-bundle.css';
	import 'swiper/swiper-bundle.min.css';
	import banner from "@/static/image/lx/banner.jpg"
	import tdpeo from "@/static/image/lx/td.jpg"
	import tdewm from "@/static/image/lx/ewm01.jpg"
	import Floor from './homePublic/floorBlock.vue'
	import examinationAreaVue from "./homePublic/examinationArea.vue";
	import hotPicAreaVue from "./homePublic/hotPicArea.vue";
	import teamVue from './homePublic/team.vue';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {

		components: {

			examinationAreaVue,
			hotPicAreaVue,
				teamVue,
			Floor
		},
		data() {
			return {
				banner,
				tdpeo,
				tdewm,
				adImg: [{
						id: 1,
						img1: require('@/static/image/lx/adda1.jpg')
					},
					{
						id: 1,
						img2: require('@/static/image/lx/adda1.jpg')
					}
				],
				newSwiper: [],
				newsMenuList: [],//新闻分类
				newsMenuIndex: 0,
				bannerRightNewList: [],
				forMenuList: [],
				syyyList: [], //首页右一图标2个
				syyyList2: [], //首页右一图标2个
				websiteArticles: [],
				list: [], //热门地区
				ozlist: [], //欧洲
				floorOneShow: false,
				floortwoShow: false,
				linkList: [{
					id: 1,
					name: "荣森网络",
					url: "http://www.wuhuit.com/index.html"
				}], //友情链接
				hqList: [],
				siwper:null,
				swiperIndex:-1,
				jsslList:[],
				jsslListIndex:0,
				tdcyList:[]



			}
		},

		mounted() {
			this.getIndexData()
			this.getSelectWxNoticeCategoryList()
			this.getSelectWxNoticePage("2")
		},
		computed: {
			...mapState({
				menuListData: (state) => state.webData.menuListData,
			}),
		},
		methods: {
			...mapActions(["saveFoodPageListAction"]),
			getIndexData() {
				this.$indexData().then(res => {
					if (res.code === 0) {
						this.newSwiper = res.data.bannerList
						// 首页中上四个图标
						this.forMenuList = res.data.syzsList
						// 首页右一2个图标
						this.syyyList = res.data.syyyList
						console.log(this.syyyList,'this.syyyList')
						
						//首页右二2个图标
						this.syyyList2 = res.data.syyeList
						//首页中中图标
						this.adImg = res.data.syzzList
						//热门文章列表
						this.websiteArticles = res.data.websiteArticles
						this.floorOneShow = true
					}

				})
			},
			newMenuHandle(index){
				this.newsMenuIndex=index
				this.getSelectWxNoticePage('1')
			},
			getSelectWxNoticePage(type) {
				let param={}
				if(type==='1'){
					param={
						pageSize: 8,
						pageNum: 1,
						categoryId: this.newsMenuList[this.newsMenuIndex].id || '',
						type:type
					}
				}
				else{
					param={
						pageSize: 5,
						pageNum: 1,
						type:type
					}
				}
				this.$selectWxNoticePage(param).then(res => {
					if (res.code === 0) {
						if(type==='1'){
							this.bannerRightNewList = res.data
						}else{
							this.jsslList=res.data
							console.log(res,'res1111')
						}
					}
				})
			},
			bannerRightNewMenuHandle(index) {
				this.newsMenuIndex = index
				this.getSelectWxNoticePage('1')
			},
			goBannerRightNewDetail(id) {
				this.$router.push({
					path: '/noticeDetail',
					query: {
						id: id,
					}
				})
			},
			goLink(index) {
				window.open(this.linkList[index].url, '_blank')
			},
			goDetail(id) {
				this.$router.push({
					path: '/detail',
					query: {
						id: id,
					}
				})
			},
			goNews(id){
				this.$router.push({
					path: '/news',
					query: {
						id: id,
					}
				})
			},
			goQfwLink(url){
				this.$router.push({
					path: url,
				})
			},
			
			// 环球视野
			handleMouseEnter(index){
				this.jsslListIndex=index
			},
			handleMouseLeave(){
				
			},

			// 新闻分类
			getSelectWxNoticeCategoryList(){
				this.newsMenuList=[]
				this.$selectWxNoticeCategoryList({
					type: '1',
				}).then(res => {
					if (res.code === 0) {
						this.newsMenuList=res.data
						this.getSelectWxNoticePage("1")
					}
				})
			},
			
			goHqsyDetail(id){
				this.$router.push({
					path: '/hqsyDetail',
					query: {
						id: id,
					}
				})
			}
			
			
		}

	};
</script>
<style scoped lang="scss">
	.hqsyItem{width:168px;height:380px;position: relative;border-radius:10px;overflow: hidden;
		transition: width 0.4s linear;
		-webkit-transition: width 0.4s linear;
		.el-image{width:100%;height:380px;border-radius:10px;
			
		}
		&.checked{width:450px;
		transition: width 0.4s linear;
		-webkit-transition: width 0.4s linear;
		.el-image{width:100%;height:380px;border-radius:10px;}
		}
		.jsjzInfo{position: absolute;width:100%;padding:0 15px 10px 15px;left:0;bottom:0;z-index:9999;box-sizing: border-box;padding-top:50px;
			  background: -webkit-linear-gradient(top, rgba(255,255,255,0),rgba(0,0,0,0.9));
			  background: -o-linear-gradient(top, rgba(255,255,255,0),rgba(0,0,0,0.9)); 
			  background: -moz-linear-gradient(top, rgba(255,255,255,0),rgba(0,0,0,0.9)); 
			  background: linear-gradient(to bottom, rgba(255,255,255,0),rgba(0,0,0,0.9)); 
			.title{font-size:15px;color:#ffffff;box-sizing:border-box;}
		}
		
	}
	.teamEwm{width:105px;height:105px;
		.el-image{width:105px;height:105px;}
	}
	.ourTeamItem{
		border:1px solid #f6f7f9;padding:30px;
		.ourTeamAvatar{width:100%;height:170px;border-radius:85px 85px 85px 0;overflow: hidden;
			.el-image{width:100%;height:170px;}
		
		}
		&:hover{border:1px solid #f6f7f9;border-radius:16px;box-shadow:0 0 20px #eeeeee;}
		.address{height:30px;line-height:30px;padding:0 20px;background:#5A60CE;display:inline-block;color:#FFFFFF;}
		.contactUsBtn{height:30px;line-height:30px;margin-top:15px;border:1px solid;color:#ef9b76;border-radius:10px;}
	}
	.blockTitle {
		.line {
			width: 77px;
			height: 1px;
			background: #d4d4d4;
			margin: 0 10px;
		}

		.lineMid {
			width: 23px;
			height: 3px;
			background: #ef9b76;
		}

		.blockTitleMs {
			width: 60%;
			margin: 20px auto
		}
	}

	.newsMenuItem {
		height: 43px;
		line-height: 43px;
		border: 1px solid #d6dce5;
		border-radius: 25px;
		font-size: 15px;
		color: #919da8;
		margin: 10px 15px;
		padding: 0 20px;cursor:pointer;
		&.checked{background:#ef9b76;border-color:#ef9b76;color:#FFFFFF;}
	}

	.newsLeftBlock {
		width: 100%;
		height: 500px;

		.newsLeftBlockImg {
			height: 330px;

			.el-image {
				width: 100%;
				height: 330px;
			}
		}
	}
	.newsBlock{line-height:1.7;
		.newsRightItem{padding-bottom:20px;box-sizing: border-box;
			&+.newsRightItem{border-top:1px solid #eeeeee;padding-top:20px;}
		}
		
	}
	
	.fwghBox {
		margin-top: 30px;
		margin-bottom: 30px;

		.iconImg {
			width: 88px;
			height: 88px;
			border-radius: 50%;
			margin-right: 20px;
			line-height: 88px;
			background: #472611;
			flex-shrink: 0;
			text-align: center;

			.el-image {
				width: 48px;
				height: 48px;
				
				vertical-align: middle;
			}

			i {
				color: #e78328;
				vertical-align: middle;
			}
		}
	}

	.newSwiper {
		width: 700px;
		height: 290px;

		::v-deep .el-carousel__indicators {
			right: 0 !important;
			left: auto !important;
			transform: none !important;
			bottom: 3px;

			.el-carousel__indicator--horizontal {
				.el-carousel__button {
					width: 8px !important;
					height: 3px
				}

				&.is-active {
					.el-carousel__button {
						width: 16px !important;
						height: 3px
					}
				}
			}
		}

		.bannerImg {
			width: 700px;
			height: 290px;
			position: relative;

			el-image {
				width: 700px;
				height: 290px;
			}

			.title {
				position: absolute;
				z-index: 999;
				width: 100%;
				height: 35px;
				line-height: 35px;
				background: rgba(0, 0, 0, 0.6);
				left: 0;
				bottom: 0;
				padding: 0 200px 0 20px;
				box-sizing: border-box;
				color: #FFFFFF;
			}
		}
	}

	.bannerRightNew {
		width: 470px;
		height: 300px;

		.newsMenu {
			width: 470px;
			height: 30px;
			margin-bottom: 8px;
			color: #757575;

			.newsMenuItem {
				height: 30px;
				line-height: 30px;
				border: 1px solid #f0f0f0;
				padding: 0 20px;
				background: #f6f6f6;
				cursor: pointer;

				&.checked {
					background: #ef9b76;
					color: #FFFFFF;
					border-color: #ef9b76;
				}
			}
		}

		.bannerRightNewItem {
			cursor: pointer;

			.label {
				width: 16px;
				height: 16px;
				background: #dddddd;
				border-radius: 2px 8px 8px 2px;
				font-size: 12px;
				text-align: center;
				color: #FFFFFF;
				flex-shrink: 0;
				margin-right: 10px;
			}

			.title {
				width: 380px;
				height: 30px;
				line-height: 30px;
				color: #757575;

				&:hover {
					color: #454545;
				}
			}

			.time {
				width: 60px;
				text-align: right;
				color: #aaa;
			}

			&:nth-child(1) .label {
				background: #ef9b76;
			}

			&:nth-child(2) .label {
				background: #ef9b76;
			}

			&:nth-child(3) .label {
				background: #ef9b76;
			}

			.time {
				width: 70px;
				flex-shrink: 0
			}
		}
	}

	.fourMenuItemNew {
		width: 285px;
		height: 130px;
		overflow: hidden;
		border-radius: 5px;

		.el-image {
			width: 285px;
			height: 130px;
			transform: scale(1);
			-webkit-transform: scale(1);
			transition: transform 0.4s linear;
			-webkit-transition: transform 0.4s linear;

			&:hover {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
				transition: transform 0.4s linear;
				-webkit-transition: transform 0.4s linear;
			}
		}
	}

	.fourMenuItem {
		width: 285px;
		height: 50px;
		line-height: 50px;
		color: #FFFFFF;
		border-radius: 3px;
		font-weight: lighter;

		&.bg1 {
			background: #6696CC;
		}

		&.bg2 {
			background: #ef9033;
		}

		&.bg3 {
			background: #f7638d;
		}

		&.bg4 {
			background: #ef9b76;
		}

		.el-image {
			width: 40px;
			height: 40px;
		}
	}

	.adImg {
		width: 100%;
		height: 118px;

		.el-image {
			width: 100%;
			height: 118px;
		}
	}

	.grayBlcok {
		background: #F9F9F9;
	}

	.menuTit {
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #caccd4;
		line-height: 45px;
		border-bottom: 1px solid #caccd4;

		.titleLine {
			height: 44px;
			position: relative;

			&:before {
				content: '';
				display: block;
				width: 100%;
				height: 1px;
				border-bottom: 1px solid #ef9b76;
				position: absolute;
				left: 0;
				bottom: -1px;
			}
		}
	}

	.linkItem {
		color: #959595;
		font-size: 14px;
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		border: 1px solid #ddd;
		background: #fff;
		margin-right: 15px;
		cursor: pointer;

		&:hover {
			border: 1px solid #ef9b76;
			color: #fff;
			background: #ef9b76;
			cursor: pointer;
		}
	}
</style>